<template>
  <div class="air">
    {{ $route.query.city }}
    <AirDetail :air="air" :airText="airText" />
    <AirDay :day7="day7" />
  </div>
</template>

<script>
export default { name: "air" };
</script>
<script setup>
import AirDetail from "./cpns/airdetail.vue";
import AirDay from "./cpns/airday.vue";

import usePublicStore from "@/stores/modules/public";
import useAirStore from "@/stores/modules/air";
import { storeToRefs } from "pinia";
import { useRoute, useRouter } from "vue-router";

const publicStore = usePublicStore();
const { city, code } = storeToRefs(publicStore);

const airStore = useAirStore();
watch(city, (newCity) => {
  airStore.fetchAirData(newCity, code.value);
});
city.value && airStore.fetchAirData(city.value, code.value);

const { air, airText, day7 } = storeToRefs(airStore);

const route = useRoute();

// setTimeout(() => {
//   console.log(route.query);
// }, 1000);
</script>

<style lang="less" scoped>
.air {
  max-width: 1180px;
  margin: 0 auto;
}
</style>